<template>
  <div class="app-container summary-dashboard">
    <!-- 标题行 -->
    <div class="summary-header">
<!--      <h2 class="title">达标情况汇总</h2>-->
<!--      <div class="sub-title">数据更新时间：{{ new Date().toLocaleString() }}</div>-->
      <h2 class="title">达标情况汇总</h2>
      <div class="sub-title">{{ finishedText }}：{{ finishedDate }}</div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :cell-style="{padding: '0px 0px'}"
        :header-cell-style="{background: '#f8f9fa', fontWeight: 'bold'}"
      >
        <!-- 项目分类列 -->
        <el-table-column
          prop="category"
          label="项目分类"
          width="180"
          align="center"
        />

        <!-- 设置标准（多行内容） -->
        <el-table-column
          label="设置标准"
          min-width="300"
          align="left"
        >
          <template #default="{row}">
            <div class="multi-line-content">
              <div
                v-for="(item, index) in row.standard"
                :key="index"
                class="content-item"
              >
                <div class="item-label" v-html="item.label"></div>
                <div class="item-value" v-html="item.value"></div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 现有条件（多行内容） -->
        <el-table-column
          label="现有条件"
          min-width="300"
          align="left"
        >
          <template #default="{row}">
            <div class="multi-line-content">
              <div
                v-for="(item, index) in row.currentCondition"
                :key="index"
                class="content-item"
              >
                <div class="item-label" v-html="item.label"></div>
                <div class="item-value" v-html="item.value"></div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 是否达标（绿色强调） -->
        <el-table-column
          prop="isQualified"
          label="是否达标"
          width="150"
          align="center"
          class-name="qualified-column"
        >
          <template #default="{row}">
            <span class="status-text" :style="getStatusStyle(row.isQualified)">
              {{ row.isQualified }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listInfo } from '@/api/pg/info'; // 引入 listInfo API
import { getConfigKey } from "@/api/system/config";

export default {
  data() {
    return {
      tableData: [], // 初始化为空数组
      finishedText: '', // 存储 pg.finishedText
      finishedDate: ''  // 存储 pg.finishedDate
    };
  },
  mounted() {
    this.fetchData();
    this.getSystemParams(); // 新增：获取系统参数
  },
  methods: {
    // 获取系统参数
    async getSystemParams() {
      try {
        // 获取 pg.finishedText 参数
        const textRes = await getConfigKey('pg.finishedText');
        this.finishedText = textRes.msg || '达标情况汇总'; // 默认为原文本

        // 获取 pg.finishedDate 参数
        const dateRes = await getConfigKey('pg.finishedDate');
        this.finishedDate = dateRes.msg || new Date().toLocaleString(); // 默认为当前时间
      } catch (error) {
        console.error('获取系统参数失败：', error);
        // 出错时使用默认值
        this.finishedText = '达标情况汇总';
        this.finishedDate = new Date().toLocaleString();
      }
    },
    async fetchData() {
      try {
        const response = await listInfo();
        const data = response.rows; // 假设返回数据结构中有 rows 字段
        this.tableData = this.formatData(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    formatData(data) {
      return data.map(item => ({
        category: item.infoType,
        standard: [
          { label: '', value: item.infoStandard }
        ],
        currentCondition: [
          { label: '', value: item.infoCondition }
        ],
        isQualified: '达标'  // 直接设置为常量
      }));
    },
    // 达标状态样式
    getStatusStyle(status) {
      const baseStyle = {
        fontSize: '16px',
        fontWeight: '500',
        padding: '5px 10px',
        borderRadius: '4px',
        display: 'inline-block'
      };

      // 绿色系渐变
      const statusMap = {
        '达标': {
          color: '#fff',
          backgroundColor: '#67C23A',
          boxShadow: '0 2px 4px rgba(103, 194, 58, 0.3)'
        },
        '部分达标': {
          color: '#fff',
          backgroundColor: '#8FBC8F',
          boxShadow: '0 2px 4px rgba(143, 188, 143, 0.3)'
        },
        '未达标': {
          color: '#fff',
          backgroundColor: '#C0E0C0',
          boxShadow: '0 2px 4px rgba(192, 224, 192, 0.3)'
        }
      };

      return { ...baseStyle, ...statusMap[status] };
    }
  }
};
</script>

<style lang="scss" scoped>
.summary-dashboard {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.summary-header {
  margin-bottom: 20px;
  text-align: center;
  .title {
    font-size: 24px;
    color: #333;
    margin-bottom: 8px;
  }
  .sub-title {
    font-size: 14px;
    color: #666;
  }
}

.table-container {
  flex: 1;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  /* 关键修复：强制表格单元格垂直居中 */
  :deep(.el-table td) {
    vertical-align: middle !important;
    padding: 8px 0 !important; /* 统一单元格内边距 */
  }

  :deep(.el-table) {
    width: 100%;
    border-collapse: collapse; /* 合并边框减少额外间距 */

    .el-table__header-wrapper {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .multi-line-content {
      width: 100%;
      display: inline-block; /* 解决高度计算异常 */
      padding: 2px 0;

      .content-item {
        width: 100%;
        padding: 3px 0;
        line-height: 1.4; /* 进一步压缩行高 */
        display: flex; /* 使用flex布局避免基线对齐问题 */
        align-items: flex-start; /* 解决第一行垂直居中问题 */

        &:not(:last-child) {
          border-bottom: 1px dashed #ebeef5;
        }

        .item-label {
          font-weight: bold;
          color: #606266;
          min-width: 80px;
          padding-right: 8px;
        }

        .item-value {
          color: #909399;
          flex: 1; /* 占满剩余宽度 */

          p {
            margin: 4px 0 !important; /* 强制减小段落间距 */
            line-height: 1.3 !important; /* 强制段落行高 */
            font-size: 14px; /* 统一字体大小 */
          }

          /* 移除首尾段落的额外间距 */
          p:first-child {
            margin-top: 0 !important;
          }
          p:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
    }

    .qualified-column {
      .cell {
        padding: 0 10px;
      }
    }

    .el-table__row {
      &:nth-child(even) {
        background-color: #fafafa;
      }
      &:hover td {
        background-color: #f0f9ff !important;
      }
    }
  }
}
</style>
